<template>
  <div class="NodeAndDeployChart_container"> 
    <div class="border-beam-top"></div>
    <div class="border-beam-right"></div>
    <div class="border-beam-bottom"></div>
    <div class="border-beam-left"></div>
    <div class="data-flow"></div> 
    <div class="chart-content">
      <div class="pie-chart" ref="pieChartRef"></div>
      <div class="chart-info">
        <div class="info-item online">
          <div class="dot"></div>
          <span class="label">{{ isNodeData ? '在线总数' : '已部署' }}</span>
          <span class="value">{{ online }} / {{ total }}</span>
        </div>
        <div class="info-item offline">
          <div class="dot"></div>
          <span class="label">{{ isNodeData ? '离线总数' : '未部署' }}</span>
          <span class="value">{{ offline }} / {{ total }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'NodeAndDeployChart',
})
</script>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref } from 'vue';
const pieChartRef = ref<HTMLElement>();
const props = defineProps<{
  total: number;
  online: number;
  offline: number;
  title:string;
  isNodeData?: boolean;
}>();
const isNodeData = computed(() => props.isNodeData !== false);
function setPieChartOption() {
  return {
    title:{
      show: true,
      text: props.total.toString(),
      itemGap: 5, 
      x: "center",
      y: "30%",
      subtext: props.title,
      textStyle: {
         fontSize: 30,
         color: "#FFFFFF",
         fontFamily: 'YouSheBiaoTiHei, DINAlternate-Bold, sans-serif',
         textShadow: "0px 0px 10px #3CEBFF",
         fontWeight: 500
      },
      subtextStyle: {
         fontSize: 14,
         fontWeight: 400,
         color: "#D6FFFF",
         textShadow: "0px 0px 5px rgba(60, 235, 255, 0.5)"
      }
   },
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: 'rgba(0, 30, 60, 0.3)',
          borderWidth: 1
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false
        },
        data: [
          { 
            value: props.online, 
            name: isNodeData.value ? '在线' : '已部署',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#15EDA1' },
                { offset: 1, color: 'rgba(88,210,226,0)' }
              ])
            }
          },
          { 
            value: props.offline, 
            name: isNodeData.value ? '离线' : '未部署',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#0DA9F1' },
                { offset: 1, color: 'rgba(0,181,255,0)' }
              ])
            }
          }
        ],
        emphasis: {
          scale: false
        }
      }
    ],
  };
}
let pieChart: echarts.ECharts | null = null;
function initChart() {
  if (!pieChartRef.value) return; 
  if (pieChart) {
    pieChart.dispose();
  } 
  pieChart = echarts.init(pieChartRef.value);
  pieChart.setOption(setPieChartOption());
}
function updateChart() {
  if (!pieChart) return;
  pieChart.setOption(setPieChartOption());
}
watch([() => props.total, () => props.online, () => props.offline], () => {
  updateChart();
});
function handleResize() {
  pieChart?.resize();
}
onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});
onBeforeUnmount(() => {
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped>
.NodeAndDeployChart_container {
  width: 199px;
  height: 229px;
  backdrop-filter: blur(8px);
  border-radius: 4px;
  box-shadow: 
    inset 0 0 25px rgba(0, 140, 255, 0.08),
    0 0 20px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(0, 150, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: card-pulse 6s infinite alternate ease-in-out;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      transparent 0%,
      rgba(0, 180, 255, 0.6) 50%,
      transparent 100%);
    filter: blur(1px);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.5);
    // animation: scanline 6s infinite; // 注释掉扫描线动画
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(rgba(40, 100, 180, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(40, 100, 180, 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.4;
    z-index: 1;
  }
  
  .hud-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    pointer-events: none;
    z-index: 5;
    
    &.top-left {
      top: 0;
      left: 0;
      border-top: 2px solid rgba(0, 180, 255, 0.6);
      border-left: 2px solid rgba(0, 180, 255, 0.6);
      animation: hud-pulse 3s infinite alternate;
    }
    
    &.top-right {
      top: 0;
      right: 0;
      border-top: 2px solid rgba(0, 180, 255, 0.6);
      border-right: 2px solid rgba(0, 180, 255, 0.6);
      animation: hud-pulse 3s infinite alternate;
      animation-delay: 0.5s;
    }
    
    &.bottom-right {
      bottom: 0;
      right: 0;
      border-bottom: 2px solid rgba(0, 180, 255, 0.6);
      border-right: 2px solid rgba(0, 180, 255, 0.6);
      animation: hud-pulse 3s infinite alternate;
      animation-delay: 1s;
    }
    
    &.bottom-left {
      bottom: 0;
      left: 0;
      border-bottom: 2px solid rgba(0, 180, 255, 0.6);
      border-left: 2px solid rgba(0, 180, 255, 0.6);
      animation: hud-pulse 3s infinite alternate;
      animation-delay: 1.5s;
    }
  }
  
  .border-beam-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 180, 255, 0.8),
      transparent
    );
    filter: blur(1px);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
    animation: beam-top 4s linear infinite;
    opacity: 0.8;
  }
  
  .border-beam-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 60px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(0, 180, 255, 0.8),
      transparent
    );
    filter: blur(1px);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
    animation: beam-right 4s linear infinite;
    animation-delay: 1s;
    opacity: 0.8;
  }
  
  .border-beam-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 180, 255, 0.8),
      transparent
    );
    filter: blur(1px);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
    animation: beam-bottom 4s linear infinite;
    animation-delay: 2s;
    opacity: 0.8;
  }
  
  .border-beam-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 60px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(0, 180, 255, 0.8),
      transparent
    );
    filter: blur(1px);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
    animation: beam-left 4s linear infinite;
    animation-delay: 3s;
    opacity: 0.8;
  }
  
  .data-flow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    opacity: 0.1;
    
    &::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      background-image: 
        radial-gradient(rgba(0, 180, 255, 0.2) 1px, transparent 1px),
        radial-gradient(rgba(0, 180, 255, 0.2) 1px, transparent 1px);
      background-size: 30px 30px;
      background-position: 0 0, 15px 15px;
      animation: data-flow 20s linear infinite;
    }
  }
  
  .chart-content {
    flex: 1;
    padding: 10px 5px;
    position: relative;
    z-index: 3;
    
    .pie-chart {
      height: 130px;
      position: relative;
      filter: drop-shadow(0 0 8px rgba(21, 237, 161, 0.2));   
     /*  &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-radius: 50%;
        background: rgba(0, 20, 40, 0.5);
        z-index: 0;
        box-shadow: 
          inset 0 0 20px rgba(0, 150, 255, 0.2),
          0 0 15px rgba(0, 210, 255, 0.1);
      } */
    }
    
    .chart-info {
      margin-top: 10px;
      padding: 0 10px;
      
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        position: relative;
        
        &.online .dot {
          background: #15EDA1;
          box-shadow: 0 0 8px rgba(21, 237, 161, 0.8);
        }
        
        &.offline .dot {
          background: #0DA9F1;
          box-shadow: 0 0 8px rgba(13, 169, 241, 0.8);
        }
        
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 8px;
          animation: dot-pulse 2s infinite alternate;
        }
        
        .label {
          flex: 1;
          font-family: 'Alibaba PuHuiTi', sans-serif;
          font-weight: 400;
          font-size: 14px;
          color: #CFF4EE;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-shadow: 0 0 5px rgba(207, 244, 238, 0.3);
        }
        
        .value {
          font-family: 'YouSheBiaoTiHei', 'DINAlternate-Bold', sans-serif;
          font-weight: 400;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 23px;
          text-shadow: 0px 0px 9px #3CEBFF;
          animation: value-pulse 3s infinite alternate;
          min-width: 90px;
          text-align: right;
        }
      }
    }
  }
}

@keyframes scanline {
  0%, 20%, 80%, 100% {
    transform: translateY(-100px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  50% {
    transform: translateY(250px);
  }
}

@keyframes hud-pulse {
  0% {
    box-shadow: 0 0 5px rgba(0, 180, 255, 0.4);
    opacity: 0.6;
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 180, 255, 0.7);
    opacity: 1;
  }
}

@keyframes card-pulse {
  0% {
    box-shadow: 
      inset 0 0 25px rgba(0, 140, 255, 0.08),
      0 0 20px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(0, 150, 255, 0.1);
  }
  100% {
    box-shadow: 
      inset 0 0 35px rgba(0, 140, 255, 0.12),
      0 0 25px rgba(0, 0, 0, 0.45),
      0 0 25px rgba(0, 150, 255, 0.15);
  }
}

@keyframes beam-top {
  0% {
    left: -60px;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    left: calc(100% + 60px);
    opacity: 0;
  }
}

@keyframes beam-right {
  0% {
    top: -60px;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    top: calc(100% + 60px);
    opacity: 0;
  }
}

@keyframes beam-bottom {
  0% {
    right: -60px;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    right: calc(100% + 60px);
    opacity: 0;
  }
}

@keyframes beam-left {
  0% {
    bottom: -60px;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    bottom: calc(100% + 60px);
    opacity: 0;
  }
}

@keyframes data-flow {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-20%) rotate(20deg);
  }
}

@keyframes dot-pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes value-pulse {
  0% {
    text-shadow: 0px 0px 9px rgba(60, 235, 255, 0.7);
  }
  100% {
    text-shadow: 0px 0px 15px rgba(60, 235, 255, 1);
  }
}
</style>
 